<template>
    <!-- 导航栏 -->
    <van-nav-bar title="消费记录" :right-text="creach" left-text="返回" left-arrow @click-left="back"
        @click-right="show=true" />


    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

            <div class="box">
                <div class="container1" v-for="(item,index) in recordlist">
                    <div class="left">
                        <div class="lefttop">{{item.content}}</div>
                        <div class="leftbuttom" style="font-size: 1.2em; color: #ccc;">消费日期:{{item.createtime}}</div>
                    </div>
                    <div class="right">

                        <div class="righttop" v-if="item.state==1">发布</div>
                        <div class="righttop" v-if="item.state==2">采纳</div>
                        <div class="righttop" v-if="item.state==3">充值</div>
                        <div class="righttop" v-if="item.state==4">签到</div>
                        <div class="righttop" v-if="item.state==5">下商品订单</div>
                        <div class="righttop" v-if="item.state==6">下预约订单</div>
                        <div class="righttop" v-if="item.state==-1">退货退款</div>
                        <div class="rightbuttom">￥{{item.point}}</div>
                    </div>
                </div>


            </div>

        </van-list>
    </van-pull-refresh>


    <van-popup v-model:show="show" position="bottom">
        <van-datetime-picker type="date" v-model="createtime" title="选择日期至今" @cancel="cancel" @confirm="DateSwitch" />
    </van-popup>


</template>

<script>
    export default {
        name: 'RecordIndex',
        created() {
            this.recordData()
        },
        data() {
            return {
                page: 1,
                loading: false,
                finished: false,
                refreshing: false,
                recordlist: [],
                creach: "选择时间",
                show: false,
                createtime: new Date(),
                LoginUser: this.$cookies.get('LoginUser'),
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },

            cancel() {
                this.show = false
            },

            async recordData() {

                var data = {
                    userid: this.LoginUser.id,
                    page: this.page
                }
                var result = await this.$api.RecordIndex(data);
                // this.loading = false

                if (result.data.length <= 0) {
                    this.finished = true;
                }
                this.recordlist = this.recordlist.concat(result.data);
                this.page++
                this.loading = false
                console.log(this.page)
            },


            async DateSwitch(value) {
                this.show = false
                console.log(value);
                var data = {
                    userid: this.LoginUser.id,
                    createtime: value.getTime(),  //选择时间搓
                    time: new Date().getTime(),  //当前时间搓
                }

                // 调用接口
                var result = await this.$api.Recordtime(data)
                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                } else {
                    this.recordlist = result.data
                }

            },

            // 上拉加载
            onLoad() {
                this.loading = true
                this.recordData();
            },

            // 下拉刷新
            onRefresh() {
                this.recordlist = [];
                this.refreshing = false;
                this.finished = false;
                this.page = 1;
                this.recordData();
                this.refreshing = false;
                this.loading = false;
            }
        }
    }
</script>
<style>
    .box {
        width: 100%;
        background: #fff;
        height: 93vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .container1 {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 2em 0;
        margin-bottom: 2em;
    }

    .left {
        width: 76%;
    }

    .right {
        width: 20%;
        text-align: right;
    }

    .rightbuttom {
        font-size: 1.5em;
        color: red;
        font-weight: bold;
    }

    .lefttop {
        font-size: 1.2em;
        color: rgb(56, 54, 54);
        font-weight: bold;
    }

    .righttop {
        font-size: 1.1em;
        color: rgb(56, 54, 54);
        font-weight: bold;
    }
</style>